<%@ page language="java" pageEncoding="UTF-8"%>
<%@include file="/pc/jsp/common/common.jsp"%>
<%@ page language="java" import="com.limao.DBDataClass.CrowdVRHomeClass"%>
<%@ page language="java" import="com.limao.DBDataClass.CrowdUserAuthClass"%>
<%@ page language="java" import="com.limao.DBDataClass.CrowdVrSysGoodsClass"%>
<% 
  String userid=(String)CacheClass.isLogin(request,response);
 if(CacheClass.getIntValue(userid)==0)
 {
 	out.println("<script language='JavaScript'>alert('您还没有登陆！');location.href=document.referrer;</script>"); //后退并刷新
 } 
 CrowdUserAuthClass user= WebFunction.getUserInfo(request,response);
 if(user==null)
 {
	 out.println("<script language='JavaScript'>alert('用户不存在，或被平台禁用，请联系客服！');window.history.back(-1);</script>");
	 return;
 } 
CrowdVRHomeClass obj= WebFunction.getVrHomeInfo(request,response);
 if(obj==null)
 {
	 out.println("<script language='JavaScript'>alert('交易公司不存在，或平台已中止与供公司合作，暂不开放提单交易服务！');window.history.back(-1);</script>");
	 return;
 }
 List<CrowdVrSysGoodsClass> goodslist= WebFunction.GetVrGoodsList(request,response);
 if(goodslist==null)
 {
	goodslist=new ArrayList<CrowdVrSysGoodsClass>();
 }

%>
 
 
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <title>期指投资</title>
    <script src="libs/loading.js" type="text/javascript"></script>
    <script src="libs/util.js" type="text/javascript"></script>
    <script src="libs/absPainter.js" type="text/javascript"></script>
    <script src="libs/ajax.js" type="text/javascript"></script>
    <script src="libs/crossLines.js" type="text/javascript"></script>
    <script src="libs/axis-x.js" type="text/javascript"></script>
    <script src="libs/tip.js" type="text/javascript" ></script>
    <script src="libs/linepainter.js" type="text/javascript"></script>
    <script src="libs/volumePainter.js" type="text/javascript"></script>
    <script src="libs/axis-y.js" type="text/javascript"></script>
    <script src="libs/chartEventHelper.js" type="text/javascript"></script>
    <script src="libs/controller.js" type="text/javascript"></script>
    <!-- 原始数据 -->
    <script type="text/javascript" src="libs/k-Day-data.js"></script> 
    
         
<!--     <script>
		$(window).load(function() {
			headertabcurrent=4;
			$("#header").load("pc/header.jsp"); 
			$("#footer").load("pc/footer.jsp"); 
		});
	</script> -->
    <script>
        if ($.browser.msie && $.browser.version <= 10.0)
        {
            layer.alert( "很抱歉，您的浏览器版本过低，网站功能支持较低，请您用IE11.0以上的浏览器或者其他浏览器浏览网页，推荐使用360（极速）浏览器;推荐使用谷歌浏览器");
            window.location.href=baseUrl+"pc/browserRecommend.jsp";
            $(".theme-popover-mask").fadeIn();
        }

    </script>
    <script>
		$(window).load(function() {
			headertabcurrent=4;
			$("#header").load("pc/header.jsp"); 
			$("#footer").load("pc/footer.jsp"); 
			
		});
	</script>
</head>
<body  ontouchstart="">
	<!--header-->
    <div id="header" class="header pr"></div>
    

    <div class="container jz" style="margin-top: 0px;">
        <div class="w100 of" style="background: #fafafa">

                 <div  class="w100 clearfix of" style="padding-bottom: 10px;margin-top: 10px;">
                    <div class="w100 clearfix of">
                        <div class="fl" style="width: 885px;">
                            <div>
                                <label for="qz-select" class="f15 c3" style='margin-left:31px;'>资产品种</label>
                                <select id="qz-select" class="ffa br6">

                                </select>
                            </div>
                            <div class="w100 pr" style="height: 450px;margin-top: 10px;">
                                <div id="qz-Tab" class="qz-Tab clearfix of pa" style="width: 573px;left: 319px;top: -85px;z-index: 2;">
                                    <span class="current">分时</span>
                                    <span>1分钟</span>
                                    <span>5分钟</span>
                                    <span>15分钟</span>
                                    <span>30分钟</span>
                                    <span>60分钟</span>
                                    <span>日线</span>
                                </div>
                                <div id="qz-TabContent" class="qz-TabContent" style='height: 435px;width: 800px;margin-left: 80px;margin-top: 13px;'>
                                    <div style="display: block;">
                                        <iframe class="w100 h100 of" src="pc/mins.jsp" frameborder="0" scrolling="no"  vsspace="0" hspace="0" marginwidth="0" marginheight="0">
        								</iframe>
                                    </div>
                                    <div>
                                        <iframe class="w100 h100 of" id="K_iframe" src="pc/k-painter.jsp" frameborder="0" scrolling="no"  vsspace="0" hspace="0" marginwidth="0" marginheight="0">
        								</iframe>
                                    </div>
                                </div>
                                <script>
                                    $(function () {
                                        $("#qz-Tab>span").bind('click',function () {
                                            var tabCurrent= $(this);
                                            var contentindex = $(this).index();
                                            $("#qz-Tab>span").removeClass('current');
                                            tabCurrent.addClass('current');
                                            $('.qz-TabContent>div').css('display', 'none');
 
                                            if(contentindex==0)
                                            {
                                            	$('.qz-TabContent>div').eq(0).css('display', 'block');
                                            	
                                            }
                                            else
                                            {
                                            	$('.qz-TabContent>div').eq(1).css('display', 'block');
                                            	//0：日线 1:60分钟 2:30分钟 3:15分钟 4:5分钟 5:1分钟
                                            	$("#K_iframe")[0].contentWindow.forPaient(6-contentindex);
                                            }

                                        })
                                        
                                        $("#qz-select").change(function () {
                                            var optionText = $(this).find("option:selected").text();
                                            console.log(optionText);
                                            $("#qizhikindName").html(optionText);
                                        })

                                    })
                                </script>
                            </div>
                        </div>
                        <div class="fr" style="width: 203px;margin-right: 80px;">
                            <p class="f15 c3" style="line-height: 45px;">资产产品：&nbsp;<span id="qizhikindName" class="ffa f12"><%if(goodslist.size()>0){%><%=goodslist.get(0).vrgoodsname %><%} %></span></p>
                            <div class="qz-Chanpin" style="margin-top: 10px;">
                                <div class="tittle w100 t2 f18 c3">
                                    分时成交
                                </div>


                                
                                <div class="tableBody w100 of">
                                       <canvas id="canvasBase" width="200" height="405" style="z-index: 3; background: white; border: 1px solid #69c">
									        <p> 你的浏览器不支持html5哟</p>
									    </canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                 </div>
             </div>

            <div id="QiZhiTab" class="QiZhiTab w100 clearfix of">
                <p class="QiZhiTabCurrent br3">交易</p>
                <p class="br3">持仓</p>
                <p class="br3">委托记录</p>
                <p class="br3">我的资产</p>
            </div><!--QiZhiTab-->

            <div id="QiZhiTabContent" class="QiZhiTabContent w100 of">
                
                
                <div style="display: block">
                    <div class="of jz" style="width: 90%">
                        <div class="w100 c3 f14" style="line-height: 41px;margin-top: 30px;">
                            	<div class='fl' style="width: 26.58%;">
                            	我的可用资金：<span class="corange f18" id="totalenablermb"></span><span class="f15"></span>
                            	</div>
                            	 <div class="fl c3 f14" style="width: 35%;line-height: 41px;">
                                    	当前价格：<span class="cred f18" id="nowprice">0<span class="f15"></span></span>
                                </div>
                        </div>
                        <div class="w100 clearfix of mgt20">
                            <div class="fl mgt10" style="width: 878px;">
                               
                                 <div class="fl c3 f14" style="width: 30%;line-height: 41px;">
                              		      委托价格：<input type="number" name="price" id="price" min="0" onblur="UpdateBuyRmb();" class="buyNum br6" />
                                </div>                               
                                <div class="fl c3 f14" style="width: 30%;line-height: 41px;">
                                   		 数量：<input type="number" name="num" id="num" min="0" onblur="UpdateBuyRmb();" class="buyNum br6" onkeyup="value=this.value.replace(/\D+/g,'')"/>
                                </div>
                                <div class="fl c3 f14" style="width: 35%;line-height: 41px;">
                                   	 投资金额：<span class="cred f18" id="totalBuyRmb"></span><span class="f15"></span>
                                </div>
                            </div>
                            <div class="fr">
                                <input type="button" name="" onclick="BuyRise()" value="买涨" class="qizhiInput rebinput br3 cf f125 f18 tc"/>
                            </div>
                        </div>
                        <div class="w100 clearfix of mgt30">
                            <div class="fl mgt10" style="width: 878px;">
                                <p class="w100 tc f14 c6" style="line-height: 45px;">投资有风险，参与须谨慎。请及时留意盈亏，亏损达到风险，将会强制平仓</p>
                            </div>
                            <div class="fr">
                                <input type="button" name="" onclick="BuyFail()" value="买跌" class="qizhiInput greeninput br3 cf f125 f18 tc"/>
                            </div>
                        </div>
                    </div>
                </div>
                
                
                
                <div>
                    <div class="w100 bcf chicangBlock">
                        <div class="chicangTittle w100 clearfix of f14 c3 tc">
                        	<p style="width: 130px;">资产品种</p>
                        	<p style="width: 110px;">持仓数量</p>
                        	<p style="width: 65px;">涨/跌</p>
                        	<p style="width: 140px;">投资金额</p>
                        	<p style="width: 88px;">成本价</p>
                        	<p style="width: 88px;">当前价</p>
                        	<p style="width: 140px;">市值</p>
                        	<p style="width: 100px;">当前盈亏</p>
                            <p style="width: 88px;">当前盈亏率%</p>
                            <p style="width: 100px;">操作</p>
                            <p style="width: 142px;">最近开仓时间</p>
                        </div>
                        <div class="chicangBody w100 of f14 tc c3" id="OpenOrder">

                        </div>
                    </div>
                </div>
                
                
                
                
                <div>
                    <div class="w100 bcf chicangBlock">
                        <div class="chicangTittle w100 clearfix of f14 c3 tc">
                            <p style="width: 80px;">委托号</p>
                            <p style="width: 150px;">时间</p>
                            <p style="width: 140px;">资产品种</p>
                            <p style="width: 65px;">买/卖</p>
                            <p style="width: 65px;">涨/跌</p>
                            <p style="width: 100px;">数量</p>
                            <p style="width: 88px;">委托价</p>
                            <p style="width: 130px;">总金额</p>
                            <p style="width: 90px;">状态</p>
                            <p style="width: 100px;">操作</p>
                            <p style="width: 183px;">备注</p>
                        </div>
                        <div class="chicangBody w100 of f14 tc c3" id="preOrder">
                            <!-- 我的委单 -->
                        </div>
                    </div>
                </div>
                
                
                <div>
                    <div class=" jz" style="width: 1112px;padding: 0 20px;margin-top: 15px;">
                        <div class="w100 clearfix">
                            <div class="fl" style="width: 50%;line-height: 30px;">
                                <p class="c6 f14 fl tr" style="width: 130px;" >总资产:</p>
                                <p class="cred f14 fl mgl16"><span class="f25" id="totalVrRmb">0</span></p>
                            </div>
                            <div class="fl" style="width: 50%;line-height: 30px;">
                                <p class="c6 f14 fl tr" style="width: 130px;">总市值:</p>
                                <p class="cred f14 fl mgl16"><span class="f25" id="totalEndPriRmb">0</span></p>
                            </div>
                        </div>
                        <div class="w100 clearfix mgt10">
                            <div class="fl" style="width: 50%;line-height: 30px;">
                                <p class="c6 f14 fl tr" style="width: 130px;">浮动盈亏:</p>
                                <p class="cred f14 fl mgl16"><span class="f25" id="totalVrShareRmb">0</span></p>
                            </div>
                            <div class="fl" style="width: 50%;line-height: 30px;">
                                <p class="c6 f14 fl tr" style="width: 130px;" >浮动盈亏率:</p>
                                <p class="cred f14 fl mgl16"><span class="f25" id="totalVrShareRmbRate">0</span>%</p>
                            </div>
                        </div>
                        <div class="w100 clearfix mgt10">
                            <div class="fl" style="width: 50%;line-height: 30px;">
                                <p class="c6 f14 fl tr" style="width: 130px;">可用资金:</p>
                                <p class="cred f14 fl mgl16"><span class="f25" id="vrnowrmb">0</span><span class="f16" id="vrnowcashgiftrmb"></span></p>
                            </div>
                            <div class="fl" style="width: 50%;line-height: 30px;">
                                <p class="c6 f14 fl tr" style="width: 130px;">可转资金:</p>
                                <p class="cred f14 fl mgl16"><span class="f25" id="withdrawRmb">0</span></p>
                            </div>
                        </div>
                       

                       <div class='clearfix of'>
	                        <div class="fl" style="margin-top: 30px;margin-left: 8px;">
	                            <div id="zijinZhuanru" class="bcorange cursor cf tc f19 fl" style="width: 280px;height: 55px;line-height: 55px;">资金申请转入期指投资</div>
	                            <p class="c3 f14 fl" style="margin-top: 32px;margin-left: 15px;">转入可货期资金  <a href="commonProblems.html" class="cgreen aht">赠券使用说明</a> </p>
	                        </div>
	                        <div class="fr" style="margin-top: 30px;">
	                            <div id="zijinZhuanchu" class="bcblue cursor cf tc f19 fl" style="width: 280px;height: 55px;line-height: 55px;">资金申请转出期指投资</div>
	                            <p class="c3 f14 fl" style="margin-top: 32px;margin-left: 15px;">转出将进行结算，并扣除赠券  <a href="commonProblems.html" class="cgreen aht">赠券使用说明</a> </p>
	                        </div>
                        </div>
                        
<!--                         
                        <div class="w100 clearfix of mgt30" style="border-bottom: 1px solid #E7E7E7;line-height: 67px;">
                        
                            <div class="fl f14 c9">
                                <span class="f17 c3" style="margin-right: 20px;">期指投资</span>2016-9-26 15:17:23
                            </div>
                            <div class="fr f14 cred">
                                <span class="f17 c3" style="margin-right: 20px;">期指投资可用金额</span><span class='f25' id="totalVrRmb">0</span>
                            </div>
                            
                        </div>
                         -->
                        
                    </div>
                </div>
                
                
                
            </div><!--QiZhiTabContent-->
            <script>
                $(function () {
                    $("#QiZhiTab>p").bind('click',function () {
                        var tabCurrent= $(this);
                        var contentindex = $(this).index();
                        $("#QiZhiTab>p").removeClass('QiZhiTabCurrent');
                        tabCurrent.addClass('QiZhiTabCurrent');
                        $('.QiZhiTabContent>div').css('display', 'none');
                        $('.QiZhiTabContent>div').eq(contentindex).css('display', 'block');
                        
                        switch(contentindex)
                        {
                        	case 0:
	                        	loadMyVrInfo0();
	                        	break;
                         	case 1:
	                         	loadMyVrOpen();
	                        	break;                       	
                         	case 2:
	                         	loadMyVrPreOrder();
	                        	break;
                         	case 3:
	                         	loadMyVrInfo();
	                        	break;
                       	                       
                        }

                    })
                })
            </script>
    </div><!--container-->
 
    <div id="footer" class="footer w100 of"></div><!--footer-->

<div class="theme-popover-mask"></div>

<div id="zijinIframeDiv" class="zijinIframeDiv of db pf w100 h100">
    <div class="zijinIframe jz">
        <iframe class="w100 h100 of db" src="pc/ziJinZhuanRu2.jsp" frameborder="0" scrolling="no"  vsspace="0" hspace="0" marginwidth="0" marginheight="0" >

        </iframe>
    </div>
</div>


<div id="sellDialog" class="dialog pf w100 h100">
    <div class="jz of bcf br6 of">
        <div class="dialogTittle tc jz f17">
            出售委单
        </div>
        <div class="content jz lh18 f16 of">
            <div class="w100 clearfix of">
                <p class="f16 c6 fl">出售委单价：</p>
                <input id="sellPrice" class="text_box fl" name="" type="text" value="3.5" style="margin-left: 64px" onkeyup="inputChange($('#sellNum'),$('#totalSellprice'),$(this));"/>
                <p class="f16 c6 fl">（元）</p>
            </div>
            <div class="w100 clearfix of mgt20">
                <p class="f16 c6 fl">出售数量：</p>
                <input id="min" class="min fl dmin" name="" type="button" value="-" onclick="minCount($('#sellNum'),$('#totalSellprice'),$('#sellPrice'));"/>
                <input id="sellNum" class="text_box fl" name="" type="text" value="1" onkeyup="inputChange($(this),$('#totalSellprice'),$('#sellPrice'));"/>
                <input id="add" class="add fl dadd" name="" type="button" value="+" onclick="addCount($('#sellNum'),$('#totalSellprice'),$('#sellPrice'));"/>
            </div>
            <div class="w100 clearfix of mgt20">
                <p class="f16 c6">总额：<span id="totalSellprice" class="price corange">0</span>（元）</p>
            </div>


        </div>
        <div class="button w100 of clearfix mgt10">
            <button id="sure" onclick="sellVrOrder();" class="fl cf f15" style="width: 50%">确定</button>
            <button id="cancel" onclick="DialogClose($('#sellDialog'),$('.theme-popover-mask'))" class="fl cf f15" style="width: 50%;background: #CDCDCD;">取消</button>
        </div>
    </div>
</div>

<script>

    var openidVal=0;
    var vrpreorderidVal=0;
    var vrGoodsList={};

   $(function () {
        var mgTop = ($(window).height()-265)/2-25;
        $('#sellDialog>div').css('margin-top',mgTop);

    })

    function Dialog(dialog,mask,openid) {
        var dialog = dialog;
        var mask = mask;
        mask.fadeIn();
        dialog.slideDown();
        openidVal=openid;
    }
    function DialogClose(dialog,mask) {
        var dialog = dialog;
        var mask = mask;
        mask.fadeOut();
        dialog.slideUp();
    }
    
    function setTotal(countVal,price,danjia) {
        var price = price;
        var danjia = danjia;
        var danjiaPrice = danjia.val();
        var countVal = countVal;
        var priceTotal = danjiaPrice*countVal;
        price.text(priceTotal);
    }
    function addCount(count,price,danjia) {
        var count = count;
        var price = price;
        var danjia = danjia;
        count.val(parseInt(count.val())+1);
        var countVal = count.val();
        setTotal(countVal,price,danjia);
    }
    function minCount(count,price,danjia) {
        var count = count;
        var price = price;
        var danjia = danjia;

        count.val(parseInt(count.val())-1);
        if(parseInt(count.val())<1||parseInt(count.val())==''){
            count.val(1);
        }
        var countVal = count.val();
        setTotal(countVal,price,danjia);
    }
    function inputChange(count,price,danjia) {
        var count = count;
        var price = price;
        var danjia = danjia;
        var danjiaVal = danjia.val();
        console.log(danjiaVal);
        danjia.val(danjiaVal.replace(/[^0-9.]/g,''));

        if(danjiaVal < 0 || danjiaVal ==''){
            danjia.val('');
        }
        var countVal = count.val();
        setTotal(countVal,price,danjia);
    }
 
    /**取资产产品**/
 	function loadVrGoods()
 	{
	 	$.ajax({
            url: "/cgi-bin/zl_cgi?c=0",
            data: {},
            //data: ''+JSON.stringify({c:"5",f:"login",account:"13798485970",pwd:"123456"}),
            type: 'get',
            dataType: 'json',
            contentType:"application/json;charset=utf-8",
	            beforeSend: function () {
	            },
	            success: function (data) {
	            console.log(data);
	              if(data['retcode']==0)
	              {
	              		//$('#totalenablermb').html(data.obj.vrnowrmb);
	              		  //数据
	           		$("#qz-select").html('');
					var contentHtml="";
					if(data.goods==null)  return;
					vrGoodsList=data.goods;
					var splitStr="&";
	           		$.each(data.goods, function(index, objVal) { //遍历对象数组，index是数组的索引号，objVal是遍历的一个对象。
	           		    //value=groupid & goodscode
		           		if(index==0) {
		           			contentHtml=contentHtml+'<option style="height:40px;" value ="'+objVal.groupid+splitStr+objVal.goodscode+'" selected="selected">'+objVal.groupname+'</option>';
		           			$("#qizhikindName").html(objVal.groupname);
		           		}
		           		else
		           		{
		           			contentHtml=contentHtml+'<option style="height:40px;" value ="'+objVal.groupid+splitStr+objVal.goodscode+'" >'+objVal.groupname+'</option>';
		           		}
	           		 
				    });
	           		$("#qz-select").html(contentHtml);
	              }
				  else{
					  layer.alert("retcode="+data.retcode);
					  $("#qz-select").html('');
					  $("#qizhikindName").html('');
				  }
				  	
	             },
	            error: function (data) {
	                layer.alert('网络忙，请重试');
	            },
	            complete: function () {
	            }
	        }); 
 	
 	
 	
 	}
 	
    /**购买界面当价格、数量改变,更新投资金额**/
    function UpdateBuyRmb()
    {
       var numVal= $.trim($("#num").val());
       if(numVal=='' || numVal*1.0<=0  )
       {
        	return;
       }
             
       var priceVal=$.trim($("#price").val());
       if(priceVal=='' || isNaN(priceVal*1.0) || priceVal*1.0<=0){
            $("#price").val(1);
            return false;    
       }
       
       $("#totalBuyRmb").html(numVal*1.0*priceVal);
       
    }     
    
    /**交易界面 取我的理财资产**/
    function loadMyVrInfo0()
    {
    
       $.ajax({
            url: "PlugServlet",
            data: ''+JSON.stringify({m:272}),
            type: 'post',
            dataType: 'json',
            contentType:"application/json;charset=utf-8",
            beforeSend: function () {
            },
            success: function (data) {
            console.log(data);
              if(data['state']==1)
              {
              		$('#totalenablermb').html(data.obj.vrnowrmb);
              }
			  else{
				  layer.alert(data.info);
				  $('#totalenablermb').html("0");
			  }
			  	
             },
            error: function (data) {
                layer.alert('网络忙，请重试');
            },
            complete: function () {
            }
        }); 
    }
    
    /**买涨**/
    function BuyRise()
    {
       var vrgoodsidStr =$("#qz-select", parent.document).val();;
       var numVal= parseInt($.trim($("#num").val()));
       if(numVal<=0)
       {
        	layer.alert("数量不正确。");
       }
       var priceVal= $.trim($("#price").val())*1.0;
       if(priceVal<=0)
       {
        	layer.alert("价格不能为零。");
       }       
       console.log(JSON.stringify({m:260,vrgoodsid:vrgoodsidStr,direction:0,num:numVal,price:priceVal}));
       $.ajax({
            url: "PlugServlet",
            data: ''+JSON.stringify({m:260,vrgoodsid:vrgoodsidStr,direction:0,num:numVal,price:priceVal}),
            type: 'post',
            dataType: 'json',
            contentType:"application/json;charset=utf-8",
            beforeSend: function () {
            },
            success: function (data) {
              if(data['state']==1)
              {
                layer.alert(data.info);
                loadMyVrInfo0();
              }
			  else
			  	layer.alert(data.info);
             },
            error: function (data) {
                layer.alert('网络忙，请重试');
            },
            complete: function () {
            }
        }); 
    }  
    /**买跌**/
    function BuyFail()
    {
       var vrgoodsidStr =$("#qz-select", parent.document).val();;
       var numVal= parseInt($.trim($("#num").val()));
       if(numVal<=0)
       {
        	layer.alert("数量不正确。");
       }
       var priceVal= $.trim($("#price").val())*1.0;
       if(priceVal<=0)
       {
        	layer.alert("价格不能为零。");
       } 
       $.ajax({
            url: "PlugServlet",
            data: ''+JSON.stringify({m:260,vrgoodsid:vrgoodsidStr,direction:1,num:numVal,price:priceVal}),
            type: 'post',
            dataType: 'json',
            contentType:"application/json;charset=utf-8",
            beforeSend: function () {
            },
            success: function (data) {
              if(data['state']==1)
              {
                layer.alert(data.info);
                loadMyVrInfo0();
              }
			  else
			  	layer.alert(data.info);
             },
            error: function (data) {
                layer.alert('网络忙，请重试');
            },
            complete: function () {
            }
        }); 
    }      
       
   /**取我的理财持仓**/
    function loadMyVrOpen()
    {
    
       $.ajax({
            url: "PlugServlet",
            data: ''+JSON.stringify({m:271}),
            type: 'post',
            dataType: 'json',
            contentType:"application/json;charset=utf-8",
            beforeSend: function () {
            },
            success: function (data) {
            	console.log(data);
              if(data['state']==1)
              {
                    //数据
	           		$("#OpenOrder").html('');
					var contentHtml="";
					if(data.list==null)  return;
	           		$.each(data.list, function(index, objVal) { //遍历对象数组，index是数组的索引号，objVal是遍历的一个对象。
	           		
	           		        contentHtml=contentHtml+'<div class="w100 clearfix of">'+
	                        	'<p style="width: 130px;">'+objVal.vrgoodsname+'</p>'+
	                        	'<p style="width: 110px;">'+objVal.num+'</p>';
	                        if(objVal.direction*1.0==0)
	                        	contentHtml=contentHtml+'<p style="width: 65px;" class="cred">'+objVal.directionAbout+'</p>';
	                        else
	                        	contentHtml=contentHtml+'<p style="width: 65px;" class="cgreen">'+objVal.directionAbout+'</p>';
	                        	
	                        	contentHtml=contentHtml+'<p style="width: 140px;">'+objVal.totalinvestrmb+'</p>'+
	                        	'<p style="width: 88px;">'+objVal.costPri+'</p>';

	                         if(objVal.shareRmb*1.0>=0)
	                         {
	                         	contentHtml=contentHtml+'<p style="width: 88px;" class="cred">'+objVal.endPri+'</p>'+
	                        	'<p style="width: 140px;" class="cred">'+objVal.endPriRmb+'</p>'+
	                         	'<p style="width: 100px;" class="cred">'+objVal.shareRmb+'</p>'+
	                            '<p style="width: 88px;" class="cred">'+objVal.shareRmbRate+'</p>';
	                         }
	                         else
	                         {
	                         	contentHtml=contentHtml+'<p style="width: 88px;" class="cgreen">'+objVal.endPri+'</p>'+
	                        	'<p style="width: 140px;" class="cgreen">'+objVal.endPriRmb+'</p>'+
	                         	'<p style="width: 100px;" class="cgreen">'+objVal.shareRmb+'</p>'+
	                            '<p style="width: 88px;" class="cgreen">'+objVal.shareRmbRate+'</p>';
	                         }
	                            contentHtml=contentHtml+'<p style="width: 100px;"><a href="javascript:void(0);" onclick="Dialog($(\'#sellDialog\'),$(\'.theme-popover-mask\'),'+objVal.openid+');">出售</a></p>'+
	                            '<p style="width: 142px;">'+objVal.opentimeAbout+'</p>'+                           
                            '</div>';
				    });
	           		$("#OpenOrder").html(contentHtml);
              }
			  else
			  	layer.alert(data.info);
             },
            error: function (data) {
                layer.alert('网络忙，请重试');
            },
            complete: function () {
            }
        }); 
    }   
    
    /**持仓 卖出**/
    function sellVrOrder()
    {

       var sellNumVal= $.trim($("#sellNum").val());
       var sellPriceVal=$.trim($("#sellPrice").val());
       $.ajax({
            url: "PlugServlet",
            data: ''+JSON.stringify({m:261,openid:openidVal,num:sellNumVal,price:sellPriceVal}),
            type: 'post',
            dataType: 'json',
            contentType:"application/json;charset=utf-8",
            beforeSend: function () {
            },
            success: function (data) {
              if(data['state']==1)
              {
              		 layer.alert(data.info);
              		 loadMyVrPreOrder();
              		 loadMyVrOpen();
              		 loadMyVrInfo0();
              }
			  else{
				  layer.alert(data.info);
			  }
			  	
             },
            error: function (data) {
                layer.alert('网络忙，请重试');
            },
            complete: function () {
            }
        }); 
    }    
    
    
   /**取我的理财委单**/
    function loadMyVrPreOrder()
    {
    
       $.ajax({
            url: "PlugServlet",
            data: ''+JSON.stringify({m:270}),
            type: 'post',
            dataType: 'json',
            contentType:"application/json;charset=utf-8",
            beforeSend: function () {
            },
            success: function (data) {
            	console.log(data);
              if(data['state']==1)
              {
                    //数据
	           		$("#preOrder").html('');
					var contentHtml="";
					if(data.list==null)  return;
	           		$.each(data.list, function(index, objVal) { //遍历对象数组，index是数组的索引号，objVal是遍历的一个对象。
	           		         contentHtml=contentHtml+'<div class="w100 clearfix of">'+
                                '<p style="width: 80px;">'+objVal.vrpreorderid+'</p>'+
                                '<p style="width: 150px;">'+objVal.ordertimeAbout+'</p>'+
                                '<p style="width: 140px;">'+objVal.vrgoodsname+'</p>';
                                
                            if(objVal.type*1.0==0)
                                contentHtml=contentHtml+'<p style="width: 65px;" class="cred">'+objVal.typeAbout+'</p>';
                            else
                                contentHtml=contentHtml+'<p style="width: 65px;" class="cgreen">'+objVal.typeAbout+'</p>';
                            
                                
                            if(objVal.direction*1.0==0)
                                contentHtml=contentHtml+'<p style="width: 65px;" class="cred">'+objVal.directionAbout+'</p>';
                            else
                                contentHtml=contentHtml+'<p style="width: 65px;" class="cgreen">'+objVal.directionAbout+'</p>';
                            //0未成交 1部分成交 2成交  3部分成交撒单 4无成交撒单    
                            if(objVal.state*1.0==2)      
                                  contentHtml=contentHtml+'<p style="width: 100px;" class="cred">'+objVal.numed+'</p>';
                            else if(objVal.state*1.0==1 || objVal.state*1.0==3)   
                                contentHtml=contentHtml+'<p style="width: 100px;">'+objVal.num+'(<span class="cred">'+objVal.numed+'</span>)</p>';
                            else
                                contentHtml=contentHtml+'<p style="width: 100px;" class="cgreen">'+objVal.num+'</p>';
                                
                                contentHtml=contentHtml+'<p style="width: 88px;" >'+objVal.price+'</p>'+
                                '<p style="width: 130px;">'+(objVal.price*1.0*(objVal.num*1.0+objVal.numed*1.0))+'</p>';
                            //0未成交 1部分成交 2成交  3部分成交撒单 4无成交撒单
                            if(objVal.state*1.0==1 || objVal.state*1.0==2)    
                                contentHtml=contentHtml+'<p style="width: 90px;" class="cred">'+objVal.stateAbout+'</p>';
                            else
                            	contentHtml=contentHtml+'<p style="width: 90px;" class="cgreen">'+objVal.stateAbout+'</p>';
                            
                          //0未成交 1部分成交 2成交  3部分成交撒单 4无成交撒单
                          if(objVal.state==0 || objVal.state==1)
                          {
                          	contentHtml=contentHtml+'<p style="width: 100px;"><a href="javascript:void(0);" onclick="CancelVrOrderDialog('+objVal.vrpreorderid+');">撒单</a></p>';  
                          }
                          else
                          {
                          	contentHtml=contentHtml+'<p style="width: 100px;">-</p>';
                          }      
                            contentHtml=contentHtml+'<p style="width: 183px;">'+objVal.commontAbout+'</p>'+
                            '</div>';
				    });
	           		$("#preOrder").html(contentHtml);
              }
			  else
			  	layer.alert(data.info);
             },
            error: function (data) {
                layer.alert('网络忙，请重试');
            },
            complete: function () {
            }
        }); 
    }

    

    
     /**撒单**/
    function CancelVrOrderDialog(vrpreorderid)
    {
        vrpreorderidVal=vrpreorderid;
        layer.confirm('您确定撒消委单吗？', {
  			btn: ['确定','取消'] //按钮
			}, function(){
				cancelVrOrder();
			}, function(){
				
  			}	
	    );
    }
    function cancelVrOrder()
    {
     
        $.ajax({
            url: "PlugServlet",
            data: ''+JSON.stringify({m:262,vrpreorderid:vrpreorderidVal}),
            type: 'post',
            dataType: 'json',
            contentType:"application/json;charset=utf-8",
            beforeSend: function () {
            },
            success: function (data) {
              if(data['state']==1)
              {
              		 layer.alert(data.info);
              		 loadMyVrPreOrder();
              		 loadMyVrInfo0();
              }
			  else{
				  layer.alert(data.info);
			  }
			  	
             },
            error: function (data) {
                layer.alert('网络忙，请重试');
            },
            complete: function () {
            }
        });  
    }      
           
    
    
    /**取我的理财资产**/
    function loadMyVrInfo()
    {
    
       $.ajax({
            url: "PlugServlet",
            data: ''+JSON.stringify({m:272}),
            type: 'post',
            dataType: 'json',
            contentType:"application/json;charset=utf-8",
            beforeSend: function () {
            },
            success: function (data) {
            console.log(data);
              if(data['state']==1)
              {
              	$('#totalVrRmb').html(data.obj.totalVrRmb);
              	$('#totalEndPriRmb').html(data.obj.totalEndPriRmb);
              	
              	$('#vrnowrmb').html(data.obj.vrnowrmb);
              	$('#withdrawRmb').html(data.obj.withdrawRmb);
              	
              	$('#vrnowcashgiftrmb').html('其中赠券：'+(1.0*data.obj.vrnowcashgiftrmb1+1.0*data.obj.vrnowcashgiftrmb2));
              	
              	$('#totalVrShareRmb').html(data.obj.totalVrShareRmb);
              	$('#totalVrShareRmbRate').html(data.obj.totalVrShareRmbRate);
              }
			  else
			  	layer.alert(data.info);
             },
            error: function (data) {
                layer.alert('网络忙，请重试');
            },
            complete: function () {
            }
        }); 
    }

    var Kdata;
    var endDataDtime=0;//
    var aboutV=0;
    $().ready(function() { 
    	//交易所登陆
		$.ajax({
            url: "/cgi-bin/zl_cgi?c=5",
            data: {account:"13798485970",pwd:"123456"},
            //data: ''+JSON.stringify({c:"5",f:"login",account:"13798485970",pwd:"123456"}),
            type: 'get',
            dataType: 'json',
            contentType:"application/json;charset=utf-8",
            beforeSend: function () {
            },
            success: function (data) {
            	console.log(data);
              if(data['retcode']==0)
              {
                loadVrGoods();
                loadMyVrInfo0();
  		    	Kdata = getQuote();
		        quoteChart.paint(Kdata);
			    loadBuyUserList();
			    setInterval(loadBuyUserList,5000);
              }
			  else
			  	layer.alert("retcode="+data.retcode);
             },
            error: function (data) {
                layer.alert('网络忙，请重试');
            },
            complete: function () {
            }
        }); 
        
  	});
   	
  	function getQuote() {
            return {
                quote: {
                    vrgoodsid:0,
                    time: 0,
                    open: 0,
                    preClose: 0,
                    highest: 0,
                    lowest: 0,
                    price: 0,
                    nowPri:0,
                    volume: 0,
                    amount: 0
                },
                buysell:{},
                timeid:0,
                isinit:true,
                mins: []
            }
    }
  	 
  	//取支持数据 k线类型
	function loadBuyUserList()
	{

	    //var projectidV=$("#P_projectid").html();
		$.ajax({
	            url: "LoginServlet",
	            //data: JSON.stringify({m:281,type:KType,endtime:endDataDtime}),
	            data: JSON.stringify({m:283,timeid:endDataDtime,about:aboutV}),
	            type: 'post',
	            dataType: 'json',
	            contentType:"application/json;charset=utf-8",
	            success: function (data) {
	            	//console.log(data);
	   	            if(data['state']==1)
		            {
		                endDataDtime=data.obj.timeid*1;
		                if(data.obj!=null && data.obj.mins!=null && data.obj.mins.length>0){
		                  	if(Kdata.isinit) //初始状态
			                {
			                    
			                    Kdata=data.obj;
			                	Kdata.isinit=false;
			                    quoteChart.paint(Kdata);
			                }
			                else //追加数据
			                {
			                	Kdata.isinit=false;
			                	Kdata.quote=data.obj.quote;
			                	Kdata.buysell=data.obj.buysell;
			                	
			                	Kdata.timeid=data.obj.timeid;
			                	
			                	var lenK=Kdata.mins.length;
			                	var lenO=data.obj.mins.length;
			                	if(lenK<=lenO)
			                	{
			                		Kdata.mins=data.obj.mins;
			                	}
			                	else
			                	{ 
			                	   	 for(var tm=lenK;tm>0;tm--)
			                		 {
			                		   	if(Kdata.mins[tm-1].timeid*1.0==data.obj.mins[0].timeid*1.0)
			                		   	{
			                		   		var dd=Kdata.mins.splice(tm-1,lenK-tm+1);
			                		   		break;
				                		}
			                		 }
			                	    $.each(data.obj.mins, function(index, objVal) 
			                		{
			                			Kdata.mins.push(objVal);
			                		});
			                	}
			                	quoteChart.paint(Kdata);
			                }
		                
		                }
		           }
		           else
		           {
		           
		           }
		        },
		        error: function (data) {
                 	return false;
                },
         });
    }  
    


      
       function MyQuoteChart(canvasId, options) {
            extendObject(options, this);
            this.canvas = $id(canvasId);
            this.ctx = this.canvas.getContext('2d');
            this.canvas.painter = this;
        }
        
         MyQuoteChart.prototype = {
            paint: function (Kdata) {
            
                var canvas = this.canvas;
                var ctx = this.ctx;
                this.painting = true;
                var options = this.klOptions;
                var clearPart = { width: canvas.width, height: canvas.height };
              
                ctx.clearRect(0, 0, clearPart.width, clearPart.height);
									
                ctx.save();
                
                this.fillTopText(Kdata);
            },
            fillTopText: function (Kdata) {
            
                var quote=Kdata.quote;
                var buysell=Kdata.buysell;
                
                var ctx = this.ctx;
                var topText = this.topText;
                var region = topText.region;
                ctx.clearRect(region.x, region.y, region.width, region.height);
                var price=quote.price;
                var time=quote.time;
  
                ctx.fillStyle = topText.color;
                ctx.font = topText.font;
                if (topText.textBaseline) ctx.textBaseline = topText.textBaseline;
                
                
                var h=20;
                var i=0;
                
                var txt = '      ' + quote.time;
                var width = ctx.measureText(txt).width;
                ctx.fillText(txt, topText.region.x, topText.region.y+h*i);
                
                i=1;
                txt = '卖三    ' + toMoney(buysell.sellThreePri)+'     '+buysell.sellThree;
                width = ctx.measureText(txt).width;
                ctx.fillText(txt, topText.region.x, topText.region.y+h*i);

                i=i+1;
                txt = '卖二    ' + toMoney(buysell.sellTwoPri)+'     '+buysell.sellTwo;
                width = ctx.measureText(txt).width;
                ctx.fillText(txt, topText.region.x, topText.region.y+h*i); 
                
                i=i+1;
                txt = '卖一    ' + toMoney(buysell.sellOnePri)+'     '+buysell.sellOne;
                width = ctx.measureText(txt).width;
                ctx.fillText(txt, topText.region.x, topText.region.y+h*i);    
                
                i=i+1;
                txt = '－－－－－－－－－－－－－－－－';
                width = ctx.measureText(txt).width;
                ctx.fillText(txt, topText.region.x, topText.region.y+h*i);   
                
                
                i=i+1;
                txt = '买一    ' + toMoney(buysell.buyOnePri)+'     '+buysell.buyOne;
                width = ctx.measureText(txt).width;
                ctx.fillText(txt, topText.region.x, topText.region.y+h*i);
                
                i=i+1;
                txt = '买二    ' + toMoney(buysell.buyTwoPri)+'     '+buysell.buyTwo;
                width = ctx.measureText(txt).width;
                ctx.fillText(txt, topText.region.x, topText.region.y+h*i);
                
                i=i+1;
                txt = '买三    ' + toMoney(buysell.buyThreePri)+'     '+buysell.buyThree;
                width = ctx.measureText(txt).width;
                ctx.fillText(txt, topText.region.x, topText.region.y+h*i);
                
                
                i=i+1;
                txt = '   ' ;
                width = ctx.measureText(txt).width;
                ctx.fillText(txt, topText.region.x, topText.region.y+h*i);               
 
 				var isRise = price > quote.preClose;
 				var isEqual = price == quote.preClose;
 				var isFall = price < quote.preClose;
 
                i=i+1;
                txt = '最新    '+toMoney(price);
                width = ctx.measureText(txt).width;
                ctx.fillStyle = isRise ? this.riseColor : (isFall ? this.fallColor : this.normalColor);
                ctx.fillText(txt, topText.region.x, topText.region.y+h*i); 
                
                i=i+1;
                var diff = toMoney(price - quote.preClose);
                txt = '涨跌    '+(isRise ? '↑' : (isFall ? '↓' : '')) + diff;
                width = ctx.measureText(txt).width;
                ctx.fillStyle = isRise ? this.riseColor : (isFall ? this.fallColor : this.normalColor);
                ctx.fillText(txt, topText.region.x, topText.region.y+h*i); 
                
                i=i+1;
                txt = '幅度    '+(isRise ? '↑' : (isFall ? '↓' : '')) + toMoney(diff * 100 / quote.preClose)+ '%';
                width = ctx.measureText(txt).width;
                ctx.fillStyle = isRise ? this.riseColor : (isFall ? this.fallColor : this.normalColor);
                ctx.fillText(txt, topText.region.x, topText.region.y+h*i);   
                
                var isRise = quote.open > quote.preClose;
 				var isEqual = quote.open == quote.preClose;
 				var isFall = quote.open < quote.preClose;
                i=i+1;
                txt = '今开    '+toMoney(quote.open);
                width = ctx.measureText(txt).width;
                ctx.fillStyle = isRise ? this.riseColor : (isFall ? this.fallColor : this.normalColor);
                ctx.fillText(txt, topText.region.x, topText.region.y+h*i);                
                
                i=i+1;
                txt = '昨收    '+toMoney(quote.preClose);
                width = ctx.measureText(txt).width;
                ctx.fillStyle = topText.color;
                ctx.fillText(txt, topText.region.x, topText.region.y+h*i);                
                
                var isRise = quote.highest > quote.preClose;
 				var isEqual = quote.highest == quote.preClose;
 				var isFall = quote.highest < quote.preClose;
                i=i+1;
                txt = '最高    '+toMoney(quote.highest);
                width = ctx.measureText(txt).width;
                ctx.fillStyle = isRise ? this.riseColor : (isFall ? this.fallColor : this.normalColor);
                ctx.fillText(txt, topText.region.x, topText.region.y+h*i);                 

 				var isRise = quote.lowest > quote.preClose;
 				var isEqual = quote.lowest == quote.preClose;
 				var isFall = quote.lowest < quote.preClose;
                i=i+1;
                txt = '最低    '+toMoney(quote.lowest);
                width = ctx.measureText(txt).width;
                ctx.fillStyle = isRise ? this.riseColor : (isFall ? this.fallColor : this.normalColor);
                ctx.fillText(txt, topText.region.x, topText.region.y+h*i); 
                               
                i=i+1;
                txt = '均价    '+toMoney(quote.nowPri);
                width = ctx.measureText(txt).width;
                ctx.fillStyle = topText.color;
                ctx.fillText(txt, topText.region.x, topText.region.y+h*i);       
                
                
                var max = quote.volume;
                var unit;
                if (max / 1000000 > 1000) {
                    max = max / 1000000;
                    unit = '百万';
                } else if(max / 10000 > 1000){
                    max = max / 10000;
                    unit = '万';
                }
                else
                {
                    max = max / 100;
                    unit = '百';
                }
                  
                i=i+1;
                txt = '总量    '+max.toFixed(0)+'(' + unit + ')';
                width = ctx.measureText(txt).width;
                ctx.fillStyle = topText.color;
                ctx.fillText(txt, topText.region.x, topText.region.y+h*i); 
                
                
                var max = quote.amount;
                var unit;
                if (max / 1000000 > 1000) {
                    max = max / 1000000;
                    unit = '百万';
                } else if(max / 10000 > 1000){
                    max = max / 10000;
                    unit = '万';
                }
                else
                {
                    max = max / 100;
                    unit = '百';
                }
                
                i=i+1;
                txt = '总额    '+max.toFixed(2)+'(' + unit + ')';
                width = ctx.measureText(txt).width;
                ctx.fillStyle = topText.color;
                ctx.fillText(txt, topText.region.x, topText.region.y+h*i);                        
            }
         }
        
        
        
         var quoteChart = new MyQuoteChart('canvasBase', {
            fallColor: 'green', riseColor: 'red', normalColor: 'black', needPaintAvgPriceLine: false,
            backgroundColor:'white',
            topText: { font: '9px 宋体', color: 'black', region: { x: 5.5, y: 5, width: 85, height: 50 }, textBaseline: 'top' },

            bottomText: { font: '9px 宋体', color: 'black', region: { x: 5.5, y: 50.5, width: 85, height: 48.5} }
   
        });

    
</script>

</body>
</html>